<template>
  <div>
    <Modal
      v-model="modalShow"
      draggable
      scrollable
      title="选择空间参考"
      class="spatialRefModal"
      :width="spatialRefModalWidth"
    >
      <p slot="header" class="modalHeader">选择空间参考</p>
      <CButtonClose slot="close" @click="refModalCancel" />

      <div class="modalContent">
        <div class="treeDiv">
          <ul :id="ztreeId" class="ztree"></ul>
        </div>
      </div>
      <template #footer>
        <div>
          <CButton @click="refModalOk" color="info" class="system-btn-style"
            >确定</CButton
          >
          <CButton @click="refModalCancel" color="info " class="cancel-btn"
            >取消</CButton
          >
        </div>
      </template>
    </Modal>
  </div>
</template>
<script>
export default {
  name: "spatialReferenceManage",
  props: ["modalShow"],
  computed: {},
  data() {
    return {
      ztreeId: "ztree_" + parseInt(Math.random() * 1e10),
      spatialRefModalWidth: 600,
      currenItem: "",
    };
  },
  methods: {
    initRefTree(item) {
      this.currenItem = item;
      this.ztreeSetting(item);
    },
    refModalCancel() {
      this.$emit("closed");
    },
    refModalOk() {
      var treeObj = this.ztreeObjInstance,
        nodes = treeObj.getCheckedNodes(true);
      let tempNode = "";
      let info = "";
      for (let i in nodes) {
        if (nodes.length > 1) {
          this.$Message.warning("请选择一个参考坐标系");
          break;
        }
        info = nodes[0].content.replace(/[\r\n]/g, "");
      }
      this.currenItem.default = info;
      this.$emit("spatialRefOk", info);
    },
    ztreeSetting(item) {
      let _this = this;
      let checkType = { Y: "", N: "" }; //父与子的关联去掉
      let setting = {
        check: {
          enable: true,
          nocheckInherit: false,
          chkboxType: checkType,
        },
        data: {
          simpleData: {
            enable: true,
          },
        },
        callback: {
          onClick: this.zTreeOnClick,
          onCheck: this.zTreeOnCheck,
          onExpand: this.zTreeOnClick,
        },
        view: {
          showLine: false,
        },
      };

      let urlPath = this.$api.processingApi.browserRefPath;
      this.http.get(urlPath).then((res) => {
        let data = res.data;
        if (data.success) {
          this.ztreeObjInstance = $.fn.zTree.init(
            $("#"+_this.ztreeId),
            setting,
            data.data
          );

          let nodes = this.ztreeObjInstance.getNodes();
          this.ztreeObjInstance.expandNode(nodes[0], true, false, false);
          // this.ztreeObjInstance.expandNode(nodes[1], true, false, false);
          this.ztreeObjInstance.selectNode(nodes[0], false);
        }
      });
    },
    zTreeOnClick(event, treeId, treeNode) {
      let _this = this;
      let path = this.$api.processingApi.getFileListByPath;
      let param = {
        path: treeNode.id,
        tag: treeNode.tag,
        filter: _this.currenSelectSuffix,
      };
      var treeObj = $.fn.zTree.getZTreeObj(treeId);
      let sNode = treeObj.getSelectedNodes();
      if (sNode.length > 0) {
        let zAsync = sNode[0].zAsync;
        treeObj.reAsyncChildNodes(treeNode, "refresh");
        if (zAsync) {
        } else {
          this.http.get(path, param).then((res) => {
            let data = res.data;
            if (data.success == true) {
              treeNode.halfCheck = false;
              treeObj.addNodes(treeNode, data.data, false);
              sNode[0].zAsync = true;
            }
          });
        }
      }
    },
    zTreeOnCheck(event, treeId, treeNode) {
      var treeObj = $.fn.zTree.getZTreeObj(treeId),
        nodes = treeObj.getCheckedNodes(true);
      let item = this.currenItem;
    },
  },
};
</script>
<style scoped>
.modalContent {
  display: flex;
}
.treeDiv {
  height: 500px;
  width: 568px;
  overflow-y: auto;
}
</style>
